<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" fixed>
      <template #title>
        <van-button
          type="info"
          size="small"
          icon="search"
          class="search-btn"
          round
          to="/search"
        >
          搜索
        </van-button>
      </template>
    </van-nav-bar>

    <!-- 标签页 -->
    <van-tabs v-model="active" animated swipeable class="channel-tabs">
      <van-tab :title="item.name" v-for="item in channelList" :key="item.id">
        <!-- 将数据传给子组件artical-list -->
        <artical-list :channel="item"></artical-list>
      </van-tab>
      <template #nav-right>
        <div class="placeholder"></div>
        <div class="hamburger-btn" @click="isPopupShow = true">
          <i class="toutiao toutiaogengduo"></i>
        </div>
      </template>
    </van-tabs>

    <!-- 编辑频道信息的弹出层 -->
    <van-popup
      v-model="isPopupShow"
      position="bottom"
      :style="{ height: '100%' }"
      closeable
      close-icon-position="top-left"
    >
      <channel-editor
        :myChannels="channelList"
        :active="active"
        @upDateTab="onUpDateActive"
      ></channel-editor>
    </van-popup>
  </div>
</template>

<script>
import { getChannelList } from '@/api/user.js';
import ArticalList from '@/components/ArticalList.vue';
import ChannelEditor from '@/components/channel-editor.vue';
// 按需导入
import { getItem } from '@/utils/storage.js';
// 导入state的辅助函数
import { mapState } from 'vuex';
export default {
  name: 'HomePage',
  components: {
    ArticalList,
    ChannelEditor,
  },
  data() {
    return {
      active: 0,
      // 存储用户频道列表数据
      channelList: [],
      // 控制弹出层的显示和隐藏
      isPopupShow: false,
    };
  },
  methods: {
    async loadChannelList() {
      // 在加载频道列表的时候需要判断，用户是否登录，如果已登录，就调用接口获取线上的数据
      // 如果未登录，判断本地存储里面的有没有数据，如果有就用本地存储里面的数据，如果没有就请求默认数据来渲染
      if (this.user) {
        // 用户已登录
        try {
          const { data } = await getChannelList();
          // console.log(data);
          this.channelList = data.data.channels;
          // console.log(data.data);
          // console.log(this.channelList);
        } catch (err) {
          this.$toast('获取频道数据失败！');
          console.log(err);
        }
      } else {
        // 用户未登录
        // console.log(111);
        const storageData = getItem('token_mychannels');
        // console.log(storageData);
        if (storageData) {
          this.channelList = storageData;
        } else {
          // 调用接口获取用户未登录状态下的默认数据
          const { data } = await getChannelList();
          this.channelList = data.data.channels;
        }
      }
    },
    // 接受channel-editor子组件的通知来定义方法修改tab栏的激活项
    // 这里设置一个默认值isPopupShow = true 也就是弹出层不关，如果子组件的自定义事件不传值过来就会使用默认值，不关弹出层,当处理tab栏切换的时候，要把isPopupShow的值设置为false
    onUpDateActive(index, isPopupShow = true) {
      // console.log('父组件', index);
      this.active = index;
      // 关闭编辑弹出层
      this.isPopupShow = isPopupShow;
    },
  },
  created() {
    // 定义获取频道列表的方法
    this.loadChannelList();
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
.home-container {
  margin-top: 174px;
  margin-bottom: 100px;
  /deep/ .van-nav-bar__title {
    max-width: unset;
  }
  /deep/ .search-btn {
    width: 555px;
    height: 64px;
    background-color: #5babfb;
    border: none;
    font-size: 24px;
    .van-icon {
      font-size: 32px;
    }
  }
  // tab切换栏
  .channel-tabs {
    /deep/ .van-tabs__wrap {
      position: fixed;
      top: 92px;
      z-index: 1;
      left: 0;
      right: 0;
      height: 82px;
    }
    /deep/ .van-tab {
      min-width: 200px;
      border-right: 1px solid #edeff3;
      font-size: 30px;
      color: #777777;
    }
    .van-tab--active {
      color: #333333;
    }
    .van-tabs__nav {
      padding-bottom: 0;
    }
    .van-tabs__line {
      bottom: 8px;
      width: 31px !important;
      height: 6px;
      background-color: #3296fa !important;
    }
    // 占位符效果，flex-shrink 的默认值为1也就是默认参与父级有flex布局的盒子来平分剩余空间，当把值该为0的时候，就会不参与flex布局的剩余空间分配。
    .placeholder {
      flex-shrink: 0;
      width: 66px;
      height: 82px;
    }
    .hamburger-btn {
      position: fixed;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 66px;
      height: 82px;
      background-color: #fff;
      opacity: 0.902;
      i.toutiao {
        font-size: 33px;
      }
      &:before {
        content: '';
        position: absolute;
        left: 0;
        width: 1px;
        height: 100%;
        background-image: url(~@/assets/gradient-gray-line.png);
        background-size: contain;
      }
    }
  }
}
</style>
